@import '@/assets/css/public';
.main1IntervalGraph{
	color:#fff;
	.wrapper{
	  .ctn{
			height: 900px;
			border: 1px solid #e3e5e4;
			box-sizing: border-box;
			padding: 20px;
			display: flex;
			& > div + div{
				margin-left: 10px;
			}
			.one,.two,.three{
				flex:0.5;
				overflow: hidden;
				display: flex;
				 flex-direction: column;
				 justify-content: space-between;
				& > div{
				  border: 1px solid white;
				  flex: 1;
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  text-align: center;
				  font-size: 18px;
				}
				.numItem{
				  display: flex;
				  & > div{
				    width: 50%;
				    height: 100%;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				  }
				  & > div:first-child {
				    border-right: 1px solid white;
				  }
				}
			}
			.four{
				flex:2.5;
				overflow: hidden;
				border: 1px solid white;
				box-sizing: border-box;
				position: relative;
				display: flex;
				flex-direction: column;
				.title{
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  border-bottom: 2px solid white;
				  height: 3.7rem;
				  font-size: 25px;
				}
				.svgWrapper{
					flex:1;
					overflow: hidden;
				}
				.newState{
					position: absolute;
					left:10px;
					bottom: 10px;
				  border: 1px solid white;
					width: 280px;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-between;
				  padding: 10px;
				  box-sizing: border-box;
				  font-size: 20px;
					.address{
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
					  & > div{
					    flex:1;
							overflow: hidden;
					    display: flex;
					    align-items: center;
					    justify-content: flex-end;
					  }
						& > div:first-child{
							flex:2.3;
							overflow: hidden;
						}
					}
					.state{
						display: flex;
						flex-direction: column;
						& > .stateItem + .stateItem{
							margin-top: 10px;
						}
						.stateItem{
							display: flex;
							align-items: center;
							& > p{
								margin: 0;
								width: 168px;
							}
							& > .itm{
								flex:1;
								overflow: hidden;
								display: flex;
								justify-content: space-between;
							}
						}
					}
				}
				.bashouGroup{
					list-style: none;
					padding: 0;
					margin: 0;
					display: flex;
					flex-direction: column;
					width: 170px;
					position: absolute;
					right:80px;
					bottom: 10px;
					& > li{
						padding: 0;
						margin: 0;
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > p{
							margin: 0;
							font-size: 16px;
							margin-top: 10px;
						}
						.YuanFangicon{
							width: 116px;
							margin-left: 5px;
							position: relative;
							.yuanfang{
								height: 80px;
								position: relative;
								& > p:nth-child(1){
									position: absolute;
									top:0;
									left:50%;
									transform: translateX(-50%);
								}
								& > p:nth-child(2){
									position: absolute;
									top:55%;
									right:0;
									transform: translateY(-50%);
								}
							}
							.polygon-icon{
								width: 45px;
								height: 45px;
								position: absolute;
								top:70%;
								left:52%;
								transform: translate(-50%, -50%);
								cursor: pointer;
							}
						}
					}
				}
				.yaoce{
					position: absolute;
					left:10px;
					bottom: 250px;
					display: flex;
					flex-direction: column;
					width: 160px;
					.yaoceItem{
						flex:1;
						overflow: hidden;
						display: flex;
						align-items: center;
						border: 1px solid white;
						box-sizing: border-box;
						& > p + p{
							border-left: 1px solid white;
						}
						& > p{
							margin: 0;
							padding: 10px;
							box-sizing: border-box;
							flex:1;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						& > p:nth-child(2){
							flex:1.2;
							overflow: hidden;
							cursor: pointer;
						}
					}
				}
			}
			.five{
				flex:1;
				overflow: hidden;
				border: 1px solid white;
				display: flex;
				flex-direction: column;
				.title{
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  border-bottom: 2px solid white;
				  height: 3.7rem;
				  font-size: 25px;
				}
				.yabanList{
					flex:1;
					overflow: hidden;
				  display: flex;
				  flex-direction: column;
					// align-items: center;
					.yabanItem{
					  display: flex;
					  box-sizing: border-box;
					  cursor: pointer;
						margin: 0 auto;
						padding: 10px 0;
						& > svg{
							height: 25px;
						}
					}
				}
			}
		}
	}
}	
